<template>
  <div id="major-container">
    <el-card>
      <template #header>
        <div class="clearfix">
          <span>
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item>其他管理</el-breadcrumb-item>
              <el-breadcrumb-item>班级管理</el-breadcrumb-item>
            </el-breadcrumb></span
          >
        </div>
      </template>
      <div>
        <el-button
          type="primary"
          size="small"
          @click="
            (dialogVisible = true),
              (eventType = 'add'),
              (clazz = {}),
              (majors = [{ majorName: '', majorNum: '' }])
          "
          >新增班级</el-button
        >
        <el-input
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          v-model="keyword"
          size="small"
          style="width: 250px; margin-left: 15px"
        >
        </el-input>
      </div>
      <el-table
        :data="clazzs"
        v-loading="loading"
        :height="maxHeight"
        :stripe="true"
        style="width: 100%; top: 15px"
      >
        <!-- <el-table-column type="selection" width="55" fixed="left">
        </el-table-column> -->
        <el-table-column
          label="班级号"
          width="120"
          fixed="left"
          prop="classNum"
        >
        </el-table-column>

        <!-- <el-table-column
          width="120"
          label="班级名"
          fixed="left"
          prop="className"
        >
        </el-table-column> -->
        <el-table-column label="学院号" prop="collageNum" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="collageName"
          label="学院名称"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column label="专业号" prop="majorNum" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="majorName"
          label="专业名称"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="updateTime"
          label="最近更新"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="操作" width="150" fixed="right">
          <template #default="scope">
            <el-button size="mini" type="primary" @click="edit(scope.row)"
              >编辑</el-button
            >
            <el-popconfirm
              confirmButtonText="确定"
              cancelButtonText="取消"
              icon="el-icon-info"
              cancelButtonType="danger"
              iconColor="red"
              title="确定删除该班级信息吗？"
              @confirm="deleteClazz(scope.row.classNum)"
            >
              <template #reference>
                <el-button type="danger" size="mini">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <div style="margin-top: 30px">
        <el-pagination
          @size-change="sizeChange"
          @current-change="pageChange"
          :current-page="page"
          :page-sizes="[15, 30, 50]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :disabled="loading"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
  <div class="major-dialog">
    <el-dialog
      :title="eventType == 'add' ? '添加班级' : '修改班级'"
      v-model="dialogVisible"
      width="400px"
      @close="close"
    >
      <el-card class="box-card" shadow="never">
        <el-form
          :model="clazz"
          ref="clazzRef"
          label-width="80px"
          :rules="saveClazzRule"
        >
          <!-- <el-form-item label="班级名称" prop="className">
            <el-input v-model="clazz.className"></el-input>
          </el-form-item> -->
          <el-form-item label="班级编号" prop="classNum">
            <el-input
              :readonly="eventType == 'edit'"
              v-model="clazz.classNum"
            ></el-input>
          </el-form-item>
          <el-form-item label="所属学院" prop="collageNum">
            <el-select
              v-model="clazz.collageNum"
              placeholder="请选择所属学院"
              @change="collegeChange(clazz.collageNum)"
            >
              <el-option
                v-for="(item, index) in collageinfo"
                :key="index"
                :label="item.collageName"
                :value="item.collageNum"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属专业" prop="majorNum">
            <el-select v-model="clazz.majorNum" placeholder="请选择所属专业">
              <el-option
                v-for="(item, index) in majors"
                :key="index"
                :label="item.majorName"
                :value="item.majorNum"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-card>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { reactive, toRefs, watch, ref, unref, nextTick } from "vue";
import { OtherService, Clazz } from "@/api/other";
import { UserService, Collageinfo, Major } from "@/api/user";
import Code from "@/consts/common";
import { ElMessage } from "element-plus";

export default {
  name: "Major",
  setup() {
    const clazzs: Clazz[] = [];
    const clazz: Clazz = {};
    const collageinfo: Collageinfo[] = [];
    const majors: Major[] = [{ majorName: "", majorNum: "" }];
    const clazzRef = ref();
    let data = reactive({
      clazzs: clazzs,
      clazz: clazz,
      collageinfo: collageinfo,
      majors: majors,
      keyword: "",
      page: 1,
      size: 15,
      total: 0,
      loading: false,
      dialogVisible: false,
      eventType: "add",
      maxHeight: document.documentElement.clientHeight - 280,
      saveClazzRule: {
        className: [
          { required: true, message: "请输入班级名称", trigger: "blur" },
        ],
        classNum: [
          { required: true, message: "请输入班级编号", trigger: "blur" },
        ],
        collageNum: [
          { required: true, message: "请选择所属学院", trigger: "blur" },
        ],
        majorNum: [
          { required: true, message: "请选择所属专业", trigger: "blur" },
        ],
      },
      edit(clazz: Clazz) {
        data.collegeChange(clazz.collageNum!);
        data.eventType = "edit";
        const item: Clazz = {};
        item.className = clazz.className;
        item.classNum = clazz.classNum;
        item.collageName = clazz.collageName;
        item.collageNum = clazz.collageNum;
        item.majorNum = clazz.majorNum;
        item.majorName = clazz.majorName;
        data.clazz = item;
        data.dialogVisible = true;
      },
      close() {
        // https://segmentfault.com/q/1010000015401984
        data.majors = [{ majorName: "", majorNum: "" }];
        data.clazz = {};
        const clazzRefq = unref(clazzRef);
        if (!clazzRefq) return;
        clazzRefq.resetFields();
      },
      save() {
        const clazzRefq = unref(clazzRef);
        if (!clazzRefq) return;
        clazzRefq.validate((valid: Boolean) => {
          if (valid) {
            OtherService.saveClazz(data.clazz, data.eventType).then((res) => {
              if (res.code == Code.CODE_SUCCESS) {
                listClazz(data.page, data.size, data.keyword);
                data.dialogVisible = false;
                data.clazz = {};
                ElMessage({
                  showClose: true,
                  message: "保存班级信息成功",
                  type: "success",
                });
                clazzRefq.resetFields();
              }
            });
          }
        });
      },
      deleteClazz(id: string) {
        const item: string[] = [id];
        OtherService.deleteClazz(item).then((res) => {
          if (res.code == Code.CODE_SUCCESS) {
            ElMessage({
              showClose: true,
              message: "删除班级信息成功",
              type: "success",
            });
            listClazz(data.page, data.size, data.keyword);
          }
        });
      },
      sizeChange(size: number) {
        data.size = size;
        listClazz(data.page, size, data.keyword);
      },
      pageChange(page: number) {
        data.page = page;
        listClazz(page, data.size, data.keyword);
      },
      async collegeChange(id: string) {
        if (id == "") {
          data.majors = [{ majorName: "", majorNum: "" }];
        } else {
          data.clazz.majorNum = "";
          data.majors = [{ majorName: "", majorNum: "" }];
          await UserService.getCollageinfoById(id).then((res) => {
            if (res.code == Code.CODE_SUCCESS) {
              data.majors = res.data;
            }
          });
        }
      },
    });
    const getCollageinfo = function () {
      UserService.getCollageinfo().then((res) => {
        if (res.code == Code.CODE_SUCCESS) {
          data.collageinfo = res.data;
        }
      });
    };
    const listClazz = (
      page: number = 1,
      size: number = 15,
      keyword?: string
    ) => {
      data.loading = true;
      OtherService.listClass({ page, size, keyword }).then((res) => {
        if (res.code == Code.CODE_SUCCESS) {
          data.clazzs = res.data.data;
          data.total = res.data.total;
          data.loading = false;
        }
      });
    };

    watch(
      () => data.keyword,
      (newValue, oldVlaue) => {
        listClazz(1, data.size, newValue);
      }
    );

    listClazz();
    getCollageinfo();
    const getHeight = () => {
      data.maxHeight = document.documentElement.clientHeight - 280;
    };
    window.addEventListener("resize", getHeight, false);
    return {
      ...toRefs(data),
      clazzRef,
    };
  },
};
</script>

<style lang="less" scoped>
</style>

<style lang="less">
.major-dialog {
  .el-card__body {
    padding: 5px 15px !important;
  }
  .el-dialog__body {
    padding: 20px 20px;
  }
}
</style>